import React, { useEffect, useRef, useState } from 'react';
import './index.less';
import {
  Tree,
  Card,
  Button,
  Input,
  Space,
  Table,
  notification,
  Modal,
} from 'antd';
const { confirm } = Modal;
import request from 'umi-request';
import { Resizable } from 'react-resizable';
import 'react-resizable/css/styles.css'; // 一定要引入样式，否则没有拖拽的小标标
import { history } from 'umi';
import { ExclamationCircleFilled } from '@ant-design/icons';
function Index() {
  const [api, contextHolder] = notification.useNotification();
  const onSelect = (selectedKeys, info) => {
    // console.log('selected', selectedKeys, info);
    setclassfy(selectedKeys);
    request(
      `/api/hyq/get_notification?pw=${searchInp.current.input.value}&classfy=${selectedKeys}`,
      { method: 'get' },
    ).then((res) => {
      setTableData(res.data);
    });
  };
  const [classfy, setclassfy] = useState(''); // 左侧选中分类
  const [treeData, setTreeData] = useState([]);
  const [tableData, setTableData] = useState([]);
  const [selectedRowKeys, setSelectedRowKeys] = useState(''); // 通知分类单选
  const [isone, editone] = useState(false);
  useEffect(() => {
    renderList();
  }, []);
  // 表格列
  const columnss = [
    {
      title: '',
      dataIndex: 'id',
      width: 20,
      ellipsis: true,
      render: (text, data, index) => {
        // console.log(selectedRowKeys,'key')
        return (
          <div>
            <input
              type="checkbox"
              checked={selectedRowKeys === data._id ? true : false}
              name=""
              id={data._id}
              onChange={(e) => {
                editChk(e, data._id);
              }}
            />
          </div>
        );
      },
    },
    {
      title: '',
      dataIndex: 'id',
      width: 60,
      ellipsis: true,
      align: 'center',
      render: (text, data, index) => index + 1,
    },
    {
      title: '公告名称',
      dataIndex: 'title',
      width: 150,
      ellipsis: true,
    },
    {
      title: '公开',
      dataIndex: 'isstate',
      width: 30,
      align: 'center',
      ellipsis: true,
      render: (_, data) => (
        <Space size="middle">
          <span style={{ textAlign: 'center' }}>
            {data.isstate === true ? '是' : ''}
          </span>
        </Space>
      ),
    },
    {
      title: '接收人员',
      dataIndex: 'reveive',
      width: 150,
      ellipsis: true,
    },
    {
      title: '公告时间',
      dataIndex: 'publish',
      width: 80,
      align: 'center',
      ellipsis: true,
    },
    {
      title: '创建人',
      dataIndex: 'createFather',
      width: 50,
      ellipsis: true,
      align: 'center',
    },
  ];
  const renderList = () => {
    request('/api/hyq/get_noticeClassFy', { method: 'get' }).then((res) => {
      setTreeData(res.data);
    });
    request('/api/hyq/get_notification', { method: 'get' }).then((res) => {
      setTableData(res.data);
      // console.log(res.data);
    });
  };
  // 修改单选
  const editChk = (e, id) => {
    if (e.target.checked) {
      setSelectedRowKeys(id);
      // console.log(id,'checked')
    } else if (isone) {
      setSelectedRowKeys(id);
      // console.log(id,'isdone')
    } else {
      setSelectedRowKeys('');
      // console.log('','取消单选')
    }
  };
  // 修改按钮
  const eidtNotice = () => {
    if (selectedRowKeys == '') {
      api.open({
        message: '提示对话框',
        description: '请选择需要修改的通知公告！',
        duration: 2,
      });
    } else {
      history.push({
        pathname: '/notice/notice_manager/edit_notice',
        query: {
          key: selectedRowKeys,
        },
      });
    }
  };
  // 删除弹出
  const { confirm } = Modal;
  const showDeleteConfirm = () => {
    confirm({
      title: '你确定要删除吗，删除可没有备份了哦?',
      icon: <ExclamationCircleFilled />,
      // content: '谨慎思考',
      okText: '确定',
      okType: 'danger',
      cancelText: '不删了',
      onOk() {
        console.log('OK');
        request('/api/hyq/delNotice', {
          method: 'post',
          data: { key: selectedRowKeys },
        }).then((res) => {
          api.open({
            message: '提示对话框',
            description: '删除成功',
            duration: 2,
          });
          renderList();
        });
      },
      onCancel() {
        console.log('Cancel');
      },
    });
  };
  // 删除按钮
  const delNoticce = () => {
    if (selectedRowKeys == '') {
      api.open({
        message: '提示对话框',
        description: '请选择需要删除的通知公告！',
        duration: 2,
      });
    }
  };
  const searchInp = useRef();
  return (
    <>
      <>{contextHolder}</>
      <div className="MeansPage">
        <div className="MeansLeft">
          <div className="MeansLeftBox">
            {treeData.length > 0 && (
              <Tree
                treeData={treeData}
                defaultExpandAll={true}
                showLine
                onSelect={onSelect}
                style={{ height: '100vh' }}
                fieldNames={{ title: 'classfyName', key: '_id' }}
              />
            )}
          </div>
        </div>
        <div className="MeansRight">
          <div className="MeansRightHead">
            <div className="MeansRightHeadBtn">
              <Button
                onClick={() => {
                  history.push('/notice/notice_manager/add_notice');
                }}
              >
                新增
              </Button>
            </div>
            <div className="MeansRightHeadBtn">
              <Button
                onClick={() => {
                  eidtNotice();
                }}
              >
                修改
              </Button>
            </div>
            <div className="MeansRightHeadBtn">
              <Space wrap>
                <Button
                  type="dashed"
                  onClick={() => {
                    delNoticce();
                    showDeleteConfirm();
                  }}
                >
                  删除
                </Button>
              </Space>
            </div>

            <div className="MeansRightHeadInput">
              <Space>
                <span style={{ marginLeft: '35px' }}>名称：</span>
                <Input style={{ backgroundColor: 'white' }} ref={searchInp} />
                <Button
                  onClick={() => {
                    // console.log(searchInp.current.input.value, 'asdasdasdasddas')
                    request(
                      `/api/hyq/get_notification?pw=${searchInp.current.input.value}`,
                      { method: 'get' },
                    ).then((res) => {
                      setTableData(res.data);
                    });
                  }}
                >
                  查询
                </Button>
              </Space>
            </div>

            <div className="MeansRightHeadBtn">
              <Button>查看日志</Button>
            </div>
          </div>
          <div className="MeansRightContent">
            <Card>
              <Table
                style={{ width: '90%', height: '90vh' }}
                columns={columnss}
                pagination={false}
                bordered
                rowKey="_id"
                onRow={(record, index) => {
                  return {
                    onClick: (e) => {
                      editChk(e, record._id);
                      editone(!isone);
                    },
                  };
                }}
                dataSource={tableData}
              />
            </Card>
          </div>
        </div>
      </div>
    </>
  );
}

export default Index;
